const baseUrl = 'http://api-breakingnews-web.itheima.net'

// pagenum	是	int	页码值
// pagesize	是	int	每页显示多少条数据
// cate_id	否	string	文章分类的 Id
// state	否	string	文章的状态，可选值有：已发布、草稿
const query = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '', //空的话查询所有状态
    state: ''//空的话查询所有状态
}
let total = 0 //文章列表的总数
//1.=================== 渲染数据==================
function getList() {
    axios.get(`${baseUrl}/my/article/list`, {
        params: query,
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(res => {
        // console.log(res);
        //获取数据并渲染
        let { data, status } = res.data
        if (status === 0) {
            //清空数据
            $(".layui-table tbody").empty()
            data.forEach(obj => {
                let theTr = `<tr>
                                <td>${obj.title}</td>
                                <td>${obj.cate_name}</td>
                                <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
                                <td>${obj.state}</td>
                                <th>
                                <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                                    </th>
                            </tr>`;
                $(".layui-table tbody").append(theTr);
            })
            //获取返回来的总记录数
            total = res.data.total
            //分页 渲染完才分页
            setPage()
        }
    })
}
getList()

//2.================渲染分类数据==================
function load() {
    axios.get(`${baseUrl}/my/article/cates`, {
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(res => {
        if (res.data.status === 0) {
            $('tbody').empty()
            const { data } = res.data
            $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类
            data.forEach(obj => {
                var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
                $("select[name=category]").append(theOption);
            })
            // 让layui刷新一下form表单
            layui.form.render('select', 'category');
        }
    })
}
load()

// 3.===============根据分类以及状态查找数据==================
$('.layui-btn').on('click', e => {
    e.preventDefault()
    const category = $('select[name="category"]').val()
    const state = $('select[name="state"]').val()
    query.cate_id = category
    query.state = state
    //重新渲染
    getList()
})

// 4.=================分页=================

function setPage() {
    let laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page', // 分页所在的容器标签的ID, 不需要#
        count: total, // 数据总数，从服务端得到
        limit: query.pagesize, // 每页显示的条数
        limits: [2, 3, 5, 10], // 下拉组件每个条数
        layout: ['count', 'prev', 'page', 'next', "limit", "skip"],
        curr: query.pagenum, // setPage只要调用, 分页器就会重新生成, 所以要设置起始页
        jump: function (obj, first) { // 3. 分页改变时, 回调这个函数执行
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数
            // laypage.render每次调用初始化分页器, 会让jump马上触发, 调用load后, setPage又调用. laypage.render有执行, jump又调用, load --- 循环卡死. 
            // 首次不执行 -第一次渲染这个分页器的时候first是true, 其他时候是undefined
            if (!first) {
                query.pagenum = obj.curr; // 把页面同步到参数q对象身上
                query.pagesize = obj.limit; // 同步选中当前页有多少条数据到q对象身上
                getList();
            }
        }
    });
}
//=================删除文章=================
$('tbody').on('click', '.del', function () {
    let id = $(this).attr('myid')
    layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
        axios.get(`${baseUrl}/my/article/delete/${id}`, {
            headers: {
                Authorization: localStorage.getItem('token')
            }
        }).then(res => {
            if (res.data.status === 0) {
                $(this).parents('tr').remove()
                getList()
            }
        })
        layer.close(index);
    });

})